import React, {useEffect, useState} from 'react'
import {Button, Tabs} from 'antd'
import {history, connect} from 'umi'
import styles from './index.less'
import Basic from '../../components/Basic'
import License from '../../components/License'
import Inventory from '../../components/Inventory'
import Equipment from '../../components/Equipment'
import Maintenance from '../../components/Maintenance'
import Inspection from '../../components/Inspection'
import Violation from '../../components/Violation'
import Insurance from '../../components/Insurance'
import Order from '../../components/Order'
// import Cost from '../../components/Cost'
// import Log from '../../components/Log'
import {viewList} from '@/service/carMessage/list'
import OperationRecord from '@/components/OperationRecord'

const listViewDom = (props: {
	user: {orgId: string | number; userName: string; userId: string}
	location: any
}) => {
	// id: 车辆ID
	// status：车辆状态
	// city：车辆城市
	// tabKey：跳转后页面中tab的唯一标识
	// orgId：车辆所属公司
	// carNo：车牌号
	const {id, operationType, vin, tabKey} = props.location.query

	const [detail, setDetail] = useState<any>()
	// 初始化-数据详情
	const getViewListFun = () => {
		viewList({carId: id}).then((res: any) => {
			if (res?.success) {
				setDetail(() => res?.data)
			}
		})
	}

	useEffect(() => {
		getViewListFun()
	}, [])
	const data = {
		id,
		operationType,
		vin,
		detail,
	}

	let carCertificate: any = {}
	if (detail?.getDataFrom === 1) {
		carCertificate = {
			...detail?.carCertificate,
			motExpirationTime: data?.detail?.motExpirationTime,
			isGasCylinderCar: data?.detail?.isGasCylinderCar,
		}
	} else {
		carCertificate = detail
	}
	const tabItem: any = [
		{
			children: <Basic data={data} />,
			label: '车辆基础信息',
			key: 'Basic',
		},
		{
			children: <License data={{carCertificate}} />,
			label: '车辆证照信息',
			key: 'License',
		},
		{
			children: <Inventory data={data} />,
			label: '车辆盘点信息',
			key: 'Inventory',
		},
		{
			children: <Equipment data={data} />,
			label: '车辆设备信息',
			key: 'Equipment',
		},
		{
			children: <Maintenance data={data} />,
			label: '车辆历史维保记录',
			key: 'Maintenance',
		},
		{
			children: <Inspection data={data} />,
			label: '车辆历史年检记录',
			key: 'Inspection',
		},
		{
			children: <Violation data={data} />,
			label: '未处理违章记录',
			key: 'Violation',
		},
		{
			children: <Insurance data={data} />,
			label: '历史保险购买记录',
			key: 'Insurance',
		},
		{
			children: <Order data={data} />,
			label: '车辆历史订单记录',
			key: 'Order',
		},
		// {
		//   children: <Cost />,
		//   label: '车辆相关费用',
		//   key: 'Cost',
		// },
		{
			children: <OperationRecord businessId={id} businessType={6} />,
			label: '操作记录',
			key: 'Log',
		},
	]

	return (
		<div className={styles.page}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Tabs
					type="card"
					defaultActiveKey={tabKey || 'Basic'}
					items={tabItem}
				/>
				<div className={styles.wrap}>
					<Button
						onClick={() => {
							history.go(-1)
						}}>
						取消
					</Button>
				</div>
			</div>
		</div>
	)
}
export default connect(({user}: any) => ({user}))(listViewDom)
